<template>
	<view class="body">
		<myHeader :title="title"></myHeader>
		<uni-search-bar @confirm="sreachIt()" :focus="false" v-model="name" @clear="name=''"></uni-search-bar>
		<!-- 新增计划按钮 负责人可查看 -->
		<view v-if="currentRoleCode.includes('xx-leader')">
			<uni-fab :pattern="btnPattern" @fabClick="pageTo('./add')"></uni-fab>
		</view>

		<view>
			<uni-segmented-control style="bg-red" :current="current" :values="items" @clickItem="onClickItem"
				styleType="button" activeColor="#4cd964"></uni-segmented-control>
			<view class="content mt-20">
				<view class="group" v-for="(item, index) in list" :key="index" @click="pageTo1(item.status,item)">
					<view class="group-row">
						<view class="title">{{item.name}}</view>
						<view class="status">{{item.statusLabel}}</view>
					</view>
					<view class="note">
						<view v-if="item.time == undefined">暂无</view>
						<view v-else>{{item.time}}分钟</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	import NetWorkTool from '@/api/netWorkTool'
	export default {
		data() {
			return {
				title: '知识竞赛',
				// 模糊查询
				name: '',
				btnPattern: {
					buttonColor: '#e20909'
				},
				// 当前用户角色
				currentRoleCode: [],
				// tab current
				current: 0,
				items: ['进行中', '已结束'],
				// 考试列表
				list: []
			}

		},
		created() {
			this.getLoginUserRoles();
			this.sreachIt()
		},
		methods: {
			// 查询列表
			sreachIt() {
				let param = {
					"current": 1,
					"pageSize": 10000,
					"param": {
						"name": this.name,
					}
				}
				if (this.current == 0) {
					// 进行中
					param.param.status = 0
				} else {
					// 已完成
					param.param.status = 2
				}
				NetWorkTool.POST('/api/weekly-question/queryList', param, true).then(res => {
					this.list = res.records;
				})
			},
			onClickItem(ars) {
				this.current = ars.currentIndex
				this.sreachIt()
			},

			// 获取登录用户角色
			getLoginUserRoles() {
				let _this = this;
				uni.getStorage({
					key: 'user',
					success(e) {
						let arr = [];
						for (let item of e.data.role) {
							if (null != item.roleCode) {
								_this.currentRoleCode.push(item.roleCode)
								if (item.roleCode == 'fl-leader') {
									_this.isLeader = true;
								}
							}
						}
					}
				})
			},
			pageTo(val) {
				uni.navigateTo({
					url: val
				})

			},
			pageTo1(status, data) {
				// 未完成跳转到考试
				uni.navigateTo({
					url: './detail' + "?data=" + JSON.stringify(data)
				})
			}
		},

		components: {
			myHeader
		},
	}
</script>

<style lang="scss" scoped>
	@import url("/static/party_building/assets/style/federation.css");

	/deep/ .segmented-control {
		width: 90%;
		margin: 0 auto;
		margin-top: 2%;
		border: none !important;

		.segmented-control__item {
			border-color: #e20909 !important;
			font-size: 14px !important;
			background-color: #fff !important;

			span {
				color: #e20909 !important;
			}
		}

		.segmented-control__item--button--active {
			background: #2096f3 linear-gradient(180deg, #ff5e59, #e20909);
			border: none !important;

			span {
				color: #fff !important;
			}
		}

		.segmented-control__item--button--first {}
	}

	.group {
		height: 200upx;
		margin-top: 40upx;
		border: 1px solid #e8e8e8;
		padding: 40upx 20upx 0 20upx;
	}

	.group .body {


		// height: ;
	}

	.group .group-row {
		display: flex;
		justify-content: space-between;
	}

	.group .group-row .title {
		font-weight: bold;
		font-size: 18px;
	}

	.group .group-row .status {
		margin-top: 40upx;
		color: #00a653;
	}

	.group .note {}
</style>
